<template>
	<view class="page">
		<Header :title="'赠送好友'"></Header>
		<view class="inputItem">
			<view class="label">
				手机号
			</view>
			<u--input placeholder="请输入手机号" border="none" clearable type="number" maxlength='11' v-model="phone"></u--input>
		</view>
		<view class="search" @click="serach">
			查找好友
		</view>
		<view class="list">
			<view class="ListItem" v-if="user">
				<view class="itemMain"  >
					<image class="headPic" style="border-radius: 15rpx;" :src="user.avatar" mode="aspectFill"></image>
					<view class="itemMain_right">
						<view class="nameBox">
							<view class="name">
								{{user.nickName}}
							</view>
							<image v-if="true" class="genderIcon" src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/2809c847dc71f775764be28c9375f50.png" mode="aspectFit">
							</image>
							<image v-else class="genderIcon" src="@/static/index/man.png" mode="aspectFit"></image>
						</view>
						<view class="ItemText">
							性别：{{user.sex ? '男':'女'}}
						</view>
						<view class="ItemText">
							手机号：{{user.phonenumber}}
						</view>
					</view>
				</view>
				<view class="giveBtn" @click="selectGive">
					赠送好友
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				phone: '',
				user:null
			}
		},
		created() {

		},

		methods: {
			selectGive() {
				uni.navigateTo({
					url: '/pages/givePresent/selectGive?userId='+this.user.id+'&nickName='+this.user.nickName
				})
			},
			async serach() {
				const phoneReg = /^1[3456789]\d{9}$/
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						title: '手机号码有误，请重填',
						icon: 'none'
					})
					return false;
				}
				//查询好友
				let res = await this.$api.request('system/user/wxUser', 'get', {
					phonenumber: this.phone
				})
				if(res.data){
					this.user =res.data
				}else{
					uni.showToast({
						title:'未查询到用户',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.inputItem {
		margin-top: 30rpx;
		display: flex;
		width: 698rpx;
		height: 99rpx;
		align-items: center;
		background: #F5F5F5;
		border-radius: 5rpx;
		padding: 0 27rpx;
		box-sizing: border-box;

		.label {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-right: 42rpx;

		}
	}

	.search {
		width: 285rpx;
		height: 80rpx;
		background: #E8220F;
		border-radius: 40rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin: 73rpx auto 151rpx;
	}

	.list {
		.ListItem {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 709rpx;
			height: 397rpx;
			background: #F7F8FC;
			box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
			border-radius: 20rpx;
			padding: 37rpx 33rpx 28rpx 33rpx;
			box-sizing: border-box;

			.itemMain {
				display: flex;

				.headPic {
					width: 171rpx;
					height: 171rpx;
				}

				.itemMain_right {
					padding-top: 14rpx;
					padding-bottom: 7rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					margin-left: 32rpx;
				}

				.nameBox {
					display: flex;
					align-items: center;

					.name {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-right: 20rpx;
					}

					.genderIcon {
						width: 17rpx;
						height: 28rpx;

					}
				}

				.ItemText {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.giveBtn {
				width: 285rpx;
				height: 80rpx;
				background: #E8220F;
				border-radius: 40rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin: 0 auto;
			}
		}
	}
</style>